<template>
  <div class="a sjplatformtable">
    <div class="title-div">节点列表</div>
    <el-table :data="flowNodeTable.tableData" v-loading="loading" empty-text="暂无节点" stripe border style="width: 100%">
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="nodeName" label="节点名称" class-name="left-align">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.nodeName" placement="top">
            <span>{{ row.nodeName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="passCondition" label="通过条件" width="120">
        <template #default="{ row }">
          <span>{{ row.passCondition === 1 ? "一人通过" : "所有人通过" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="顺序" width="80" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-tooltip content="修改" placement="bottom" effect="light">
            <i class="edit-icon" @click="openEditForm('edit', row)"></i>
          </el-tooltip>
          <el-tooltip content="删除" placement="bottom" effect="light">
            <i class="del-icon" @click="handleDelete(row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="newFlowNodeTableVisible" :title="formTitle" width="50%" draggable :destroy-on-close="true">
    <FlowNodeAddOrUpdate />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="operateFlowNode">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <div class="sjplatformtable">
    <div class="title-div">流程图</div>
    <FlowChart :flowId="receivedProps.flowId" :direction="'v'" :chartWidth="chartWidth" />
  </div>
  <div>
    <FloatingAddButton :onClick="handleFloatingButtonClick" :parentRect="parentRect" />
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
import FlowNodeAddOrUpdate from "./FlowNodeAddOrUpdate.vue";
import commonUtil from "../../utils/common";
import { useFlowNodeTable } from "../../hooks/FlowManager/useFlowNodeTable";
import FlowChart from "./FlowChart.vue";
import FloatingAddButton from '../Common/FloatingAddButton.vue';

let receivedProps = defineProps(['flowId']);
let formTitle = ref("新增流程节点");
let loading = ref(false);

let chartWidth = window.innerWidth * 0.36;
//悬浮按钮活动范围
let parentRect = {
  left: window.innerWidth - window.innerWidth * 0.36,
  top: 0,
  right: window.innerWidth,
  bottom: window.innerHeight,
  width: window.innerWidth * 0.36,
  height: window.innerHeight
}

let newFlowNodeTableVisible = ref(false); //新增机构窗口
let addOrUpdate = ref("add"); //新增还是修改

let { flowNodeTable, flowStore, getFlowNode, addData, updateData, deleteData } =
  useFlowNodeTable();
getFlowNode(receivedProps.flowId);

//打开编辑窗口
function openEditForm(value, data) {
  addOrUpdate.value = value;
  if (value == "add") {
    formTitle.value = "新增流程节点";
    flowStore.resetFlowNodeModel();
    flowStore.flowNodeModel.fid = receivedProps.flowId;
  }
  if (value == "edit") {
    formTitle.value = "修改流程节点";
    flowStore.flowNodeModel = data;
  }
  newFlowNodeTableVisible.value = true;
}
//悬浮按钮点击引用事件
function handleFloatingButtonClick() {
  openEditForm('add', null);
}

//新增或修改
async function operateFlowNode() {
  if (addOrUpdate.value == "add") {
    if (await addData()) {
      commonUtil.Methods.ShowMessage("success", "新增流程节点成功！");
      newFlowNodeTableVisible.value = !newFlowNodeTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "新增流程节点失败！");
    }
  }
  if (addOrUpdate.value == "edit") {
    if (await updateData()) {
      commonUtil.Methods.ShowMessage("success", "修改流程节点成功！");
      newFlowNodeTableVisible.value = !newFlowNodeTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "修改流程节点失败！");
    }
  }
  getFlowNode(receivedProps.flowId);
}
//删除
async function handleDelete(data) {
  if (await deleteData(data.id)) {
    commonUtil.Methods.ShowMessage("success", "删除流程节点成功！");
  } else {
    commonUtil.Methods.ShowMessage("Oops", "删除流程节点失败！");
  }
  getFlowNode(receivedProps.flowId);
}
//重置按钮
function reset() {
  flowStore.resetFlowNodeModel();
}
//取消新增窗口
function cancel() {
  flowStore.resetFlowNodeModel();
  newFlowNodeTableVisible.value = !newFlowNodeTableVisible.value;
}
</script>